<style>
    .demo-drawer-profile{
        font-size: 14px;
    }
    .demo-drawer-profile .ivu-col{
        margin-bottom: 50px;
    }
</style>
<template>
	<div style="margin-top: 20px;">
		<Row type="flex" justify="end" class="code-row-bg" :gutter="16">
			<Col span="2" style="position: absolute;left: 0;">
			<Button type="primary" icon="ios-arrow-back" @click="goBack()">返回</Button>
			</Col>
		</Row>
		<br>

		<Row>
			<div class="demo-spin-container" v-if="tableLoading">
				<Spin fix>
					<Icon type="load-c" size=18 class="spin-icon-load"></Icon>
					<div>加载中...</div>
				</Spin>
			</div>
			<Table border :columns="columns" :data="feeds.data" @on-sort-change='onSortChange' style="margin-top: 32px;"></Table>
			<div style="margin: 10px;overflow: hidden">
				<div style="float: right;">
					<Page :total="feeds.record_count" :current="feeds.page_current" :page-size="feeds.page_size" class="paging" show-elevator show-total show-sizer @on-change="handleOnPageChange" @on-page-size-change='onPageSizeChange'></Page>
				</div>
			</div>
		</Row>
		
		
			 <Drawer :closable="false" width="640" v-model="showModal">
          		<div class="demo-drawer-profile">
			       <Row>
	                    <Col span="12">
	                    	{{formData.zc_type_text}}:<span v-if="formData.zc_type == 1">+{{formData.real_price}}</span><span v-else="formData.zc_type == -1">-{{formData.real_price}}</span>
	                    </Col>
	                    <Col span="12">
	                    	账单类型：<span>{{formData.type_text}}</span>
	                    </Col>
	                    <Col span="12">
	                    	用户：  <span>{{formData.realname}}</span>
	                    </Col>
	                    <Col span="12">
	                    	账号：<span>{{formData.username}}</span>
	                    </Col>
	                     <Col span="12">
	                    	时间：<span>{{formData.create_time}}</span>
	                    </Col>
	                    <Col span="12">
	                    	支付方式：  <span>{{formData.pay_type_text}}</span>
	                    </Col>
	                    <Col span="12">
	                    	金额：<span>{{formData.price}}</span>
	                    </Col>
	                     <Col span="12">
	                    	手续费：<span>{{formData.rate}}</span>
	                    </Col>
	                     <Col span="12">
	                    	备注：<span>{{formData.remark}}</span>
	                    </Col>
	                </Row>
                </div>
             </Drawer>
        
	</div>
        
</template>

<script>
	import {
		getBill,
		getBillInfo
	} from '@/api/home'

	export default {
		components: {
		
		},
		data() {
			return {
				getSearchData :{
					status:[]
				},
				searchForm: {
					status:''
	   			},
				tableLoading: false,
				tableStatus: {
					enable: []
				},
				feeds: {
					data: [],
					record_count: 0,
					page_current: 1,
					page_size: 10
				},
				showModal:false,
				formData:{
					zc_type_text:'',
					zc_type:'',
					real_price:'',
					type_text:'',
					realname:'',
					username:'',
					create_time:'',
					pay_type_text:'',
					price:'',
					rate:'',
					remark:''	
				
				},
				columns: [{
						title: 'ID',
						key: 'bill_id',
						sortable: true,
						width: 100
					},
					{
						title: '类型',
						render: (h, params) => {
							return h('div',
							    	params.row.type_text+'('+params.row.pay_type_text+')'
							)
						}
					},
					{
						title: '金额',
						render: (h, params) => {
							let p_text;
							switch(params.row.zc_type){
								case 1:
								p_text='+￥'+params.row.real_price;
								break;
								case -1:
								p_text='-￥'+params.row.real_price;
								break;
							}
							return h('div',
							    	p_text
							)
						}
					},
					{
						title: '时间',
						key:'create_time'
					},
					{
						title: '操作',
						render: (h, params) => {
							let t = this;
							return h('div', [
								h('Button', {
									props: {
										type: 'success',
										size: 'small'
									},
									on: {
										click: () => {
											t.getInfoExcute(params.row.bill_id);
										}
									}

								}, '查看'),

							])
						}
					},
				]
			}
		},
		created() {
			let t = this
			t.getTableDataExcute(t.feeds.page_current);
		},
		methods: {
			handleOnPageChange: function(page_current) {
				this.getTableDataExcute(page_current)
			},
			onPageSizeChange: function(page_size) {
				this.feeds.page_size = page_size
				this.getTableDataExcute(1)
			},
			getTableDataExcute(page_current) {
				let t = this
				t.tableLoading = true
				t.feeds.page_current = page_current
				getBill(page_current, t.feeds.page_size, t.searchForm).then(res => {
					    	//console.log(res);
					t.feeds.data = res.data.data.list
					//					console.log(t.feeds.data);
					t.feeds.record_count = res.data.data.record_count
					t.tableLoading = false
				}, function(error) {
					t.tableLoading = false
				})
			},
			onSortChange: function(data) {

			},
			getInfoExcute(bill_id){
				let t =this;
				getBillInfo(bill_id).then(res=>{
					if(res.data.code == 1){
						
						 let res_data = res.data.data;
//						 console.log(res_data);return;
						 t.formData ={
						 	zc_type_text:res_data.zc_type_text,
						 	zc_type:res_data.zc_type,
							real_price:res_data.real_price,
							type_text:res_data.type_text,
							realname:res_data.realname,
							username:res_data.username,
							create_time:res_data.create_time,
							pay_type_text:res_data.pay_type_text,
							price:res_data.price,
							rate:res_data.rate,
							remark:res_data.remark	
						 }
						  t.showModal = true;
					}else{
						t.$Notice.error({
						   title: res.data.msg
				        })
					}
				}),function(error){
					
				}
			},
			goBack(){
				 this.$router.push({
            		name: 'home'
          		})
			}
		}
	}
</script>